<template>
  <div class="source-board flex flex-column">
    <div class="range-selector flex-fixed">
      <span>范围半径:</span>
      <a-select
        v-model:value="range"
        :options="rangeList"
        :placeholder="placeholder"
        :label-in-value="true"
        style="width: 70%"
        @change="onSelectChange"
      />
    </div>
    <div class="team-manage">
      <team-manage-table :model-value="modelValue" :people-list="peopleList" />
    </div>
    <div class="source-list">
      <source-list-table />
    </div>
  </div>
</template>

<script>
import TeamManageTable from './team-manage-table.vue';
import SourceListTable from './source-list-table.vue';

export default {
  name: 'source-board',
  components: { SourceListTable, TeamManageTable },
  props: {
    modelValue: { type: Object, default: undefined },
    peopleList: { type: Array, default: () => [] },
    entityList: { type: Array, default: () => [] },
  },
  data() {
    return {
      range: undefined,
      placeholder: '',
      rangeList: [
        { label: '100米', value: 100 },
        { label: '200米', value: 200 },
        { label: '300米', value: 300 },
        { label: '500米', value: 500 },
        { label: '1公里', value: 1000 },
        { label: '2公里', value: 2000 },
        { label: '3公里', value: 3000 },
        { label: '5公里', value: 5000 },
      ],
    };
  },
  created() {
    this.$watch(
      () => this.modelValue,
      (data) => {
        if (data && data.radius) {
          let label;
          if (data.radius >= 1000) {
            label = (data.radius / 1000).toFixed(1) + '公里';
          } else {
            label = data.radius + '米';
          }
          this.range = { label: label, value: data.radius };
          this.placeholder = data.radius + '米';
        }
      },
      { immediate: false }
    );
    this.onSelectChange(this.rangeList[0]);
  },
  methods: {
    onSelectChange(e) {
      const values = { radius: e.value };
      this.$emit('update:modelValue', Object.assign({}, this.modelValue, values));
    },
  },
};
</script>

<style scoped lang="less">
.source-board {
  display: flex;
  flex-direction: column;
  width: 400px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  background: rgba(20, 46, 63, 0.75);
  .range-selector {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    z-index: 1;
  }
  .team-manage {
    flex: 1;
    //min-height: 260px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .source-list {
    flex: 1;
    //min-height: 260px;
  }
}
</style>
